<template>
    <div>
      <!--导航区域-->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>数据统计</el-breadcrumb-item>
        <el-breadcrumb-item>数据汇总</el-breadcrumb-item>
      </el-breadcrumb>

      <!--卡片视图-->
      <el-card>
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="main" style="width: 600px;height:400px;color: #4A5064"></div>

      </el-card>

    </div>
</template>

<script>
  //1、导入echarts
  import echarts from 'echarts';
    export default {
      name: "Report",
      data(){
          return{
            data: []

          }
      },
      created() {
      },
      //此时，页面的元素已经渲染完毕了！
      async mounted() {
        //2、 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        //发送请求获取数据
        const {data: res} = await this.$http.get('static/getStaticData');
        if (res.status !== 200){
          return this.$message.error("获取数据失败！");
        }
        this.data = res.data;
        //3、 指定图表的配置项和数据
        var option = {
          title: {
            text: '团队数据汇总'
          },
          tooltip: {},
          legend: {
            data:['数量']
          },
          xAxis: {
            data: ["在职人数","项目组数量","图书数量","进行中计划","已完成计划","未完成计划"]
          },
          yAxis: {},
          series: [{
            name: '数量',
            type: 'bar',
            data: this.data,
            barWidth: 50,
          }]
        };
        //4、 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      }
    }
</script>

<style scoped>

</style>
